<template>
    <div>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>课程管理</el-breadcrumb-item>
        <el-breadcrumb-item>课程列表</el-breadcrumb-item>
      </el-breadcrumb>
  
      <!-- 卡片视图区域 -->
      <el-card>
        <!-- 搜索与添加区域 -->
        <el-row :gutter="20">
          <div class="mt-4">
    <el-input
    v-model="queryInfo.query"
      placeholder="Please input"
      class="input-with-select"
    >
      <template #prepend>
        <el-select v-model="queryInfo.capacity" placeholder="Select" style="width: 115px">
          <el-option label="Select" value='' />
          <el-option label="计算机技术" value='计算机技术' />
          
          <el-option label="天文" value='天文' />
          <el-option label="地理" value='地理' />
          <el-option label="医学" value='医学' />
        </el-select>
      </template>
      <template #append>
        <el-button  @click="getCourseList()"><el-icon><Search /></el-icon></el-button>
      </template>
    </el-input>
  </div>
          <el-col :span="4">
            <el-button type="primary" @click="addDialogVisible = true">发布课程</el-button>
          </el-col>
        </el-row>
  
        <!-- 用户列表区域 -->
        <el-table :data="courselist" style="width: 100%" max-height="250" border>
           <!-- <el-table-column fixed prop="date" label="Date" width="150" /> -->
           <el-table-column type="index" label="#" width="60" />
           <el-table-column prop="course_id" label="课程编号" width="120" />
          <el-table-column prop="course_name" label="课程名字" width="120" />
         
          <el-table-column label="课程简介" width="160" >
            <template v-slot:default="scope">
              <span v-if="scope.row.course_profile === null ">无</span>
              <span v-else>{{scope.row.course_profile}}</span>
            </template>
          </el-table-column>
          <el-table-column label="课程类型" width="100" >
            <template v-slot:default="scope">
              <span v-if="scope.row.course_type === null ">无</span>
              <span v-else>{{scope.row.course_type}}</span>
            </template>
          </el-table-column>
  
    <el-table-column prop="course_section" label="总章节" width="80" />
    <el-table-column prop="course_time" label="课程时间" width="100" />
    <el-table-column prop="course_price" label="课程价格" width="120" />
    <el-table-column prop="course_user_id" label="发布者" width="120" />
    <el-table-column prop="begin_time" label="开始时间" width="120" />
    <el-table-column prop="end_time" label="结束时间" width="120" />
          <el-table-column  label="修改时间" width="120" >
            <template v-slot:default="scope">
              <span v-if="scope.row.update_time === null ">暂未修改</span>
              <span v-else>{{scope.row.update_time}}</span>
            </template>
          </el-table-column>
          <el-table-column label="审核状态" width="120" >
            <template v-slot:default="scope">
              <span v-if="scope.row.course_status === 0 ">待审核</span>
              <span v-if="scope.row.course_status === 1 ">审核通过</span>
              <span v-if="scope.row.course_status === 2 ">审核未通过</span>

            </template>
          </el-table-column>
      
         
          
          <el-table-column label="上架" width="80">
         
         <template v-slot:default="scope">
              <el-switch v-model="scope.row.course_put_status" :active-value="1" :inactive-value="0" size="large"  width="60" @change="CourseStateChanged(scope.row)"/>
              <!-- 如果返回的不是数字类型的 就不用加冒号  active-value="1" 直接写  如果是数字类型的 就需要在前面加冒号-->
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template v-slot:default="scope">
              <!-- 修改按钮 -->
             
              <el-button type="primary" size="default" @click="selectDialog(scope.row.course_id)"><el-icon><EditPen /></el-icon></el-button>
         
              <!-- 删除按钮 -->
              <el-button type="danger"  size="default" @click="deleteCourse(scope.row.course_id)"><el-icon><Delete /></el-icon></el-button>
              <!-- 修改审核状态 -->
              
              <el-tooltip effect="dark" content="修改审核状态" placement="top" :enterable="false">
                <el-button type="warning" size="default" @click="openUpdateCourseStatues(scope.row.course_id,scope.row.course_status)"><el-icon><Operation /></el-icon></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页区域 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-card>
  
      <!-- 添加用户的对话框 -->
      <el-dialog title="发布课程" v-model="addDialogVisible" width="50%" @close="addDialogClosed" :visible.sync="addDialogVisible" >
        <!-- 内容主体区域 -->
        <el-form :model="addForm"  ref="addFormRef" label-width="70px">
          <el-form-item label="课程编号" prop="course_id">
            <el-input v-model="addForm.course_id"></el-input>
          </el-form-item>
          <el-form-item label="课程名字" prop="course_name">
            <el-input v-model="addForm.course_name"></el-input>
          </el-form-item>
          <el-form-item label="课程简介" prop="course_profile">
            <el-input v-model="addForm.course_profile"></el-input>
          </el-form-item>
          <el-form-item label="课程价格" prop="course_price" >
            <el-input v-model="addForm.course_price"></el-input>
          </el-form-item>
          <el-form-item label="总章节" prop="course_section">
            <el-input v-model="addForm.course_section"></el-input>
          </el-form-item>
          <el-form-item label="课程时间" prop="course_time">
            <el-input v-model="addForm.course_time"></el-input>
          </el-form-item>
          <el-form-item label="课程类型" prop="course_type">
            <el-select v-model="addForm.course_type" placeholder="Select" style="width: 115px">
          
          <el-option label="计算机技术" value='计算机技术' />
          
          <el-option label="天文" value='天文' />
          <el-option label="地理" value='地理' />
          <el-option label="医学" value='医学' />
        </el-select>
      
          </el-form-item>
          <el-form-item label="发布人" prop="course_user_id">
            <el-input v-model="addForm.course_user_id"></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="begin_time">
            <el-time-select
                v-model="addForm.begin_time"
           
                start="00:00"
                step="00:30"
                end="23:59"
                placeholder="Select time"
                format="YYYY-MM-DD hh:mm:ss"
            />

          </el-form-item>
          <el-form-item label="结束时间" prop="end_time">
            <el-time-select
                v-model="addForm.end_time"
         
                start="00:00"
                step="00:30"
                end="23:59"
                placeholder="Select time"
                format="YYYY-MM-DD hh:mm:ss"
            />

          </el-form-item>
         
          <el-form-item label="上架" prop="statue">
            <el-switch v-model="addForm.course_put_status" :active-value="1" :inactive-value="0" size="large" /> 默认为不上架
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="closedia()">取 消</el-button>
          <el-button type="primary" @click="addCourse">确 定</el-button>
        </span>
      </el-dialog>
       <!-- 修改用户的对话框 -->
       <el-dialog title="修改课程" v-model="updateDialogVisible" width="50%" @close="addDialogClosed" :visible.sync="addDialogVisible" >
        <!-- 内容主体区域 -->
        <el-form :model="ediitForm"  ref="addFormRef" label-width="70px">
          <el-form-item label="课程编号" prop="course_id">
            <span>{{ediitForm.course_id}}</span>
            
          </el-form-item>
          <el-form-item label="课程名字" prop="course_name">
            <el-input v-model="ediitForm.course_name"></el-input>
          </el-form-item>
          <el-form-item label="课程简介" prop="course_profile">
            <el-input v-model="ediitForm.course_profile"></el-input>
          </el-form-item>
          <el-form-item label="课程价格" prop="course_price" >
            <el-input v-model="ediitForm.course_price"></el-input>
          </el-form-item>
          <el-form-item label="总章节" prop="course_section">
            <el-input v-model="ediitForm.course_section"></el-input>
          </el-form-item>
          <el-form-item label="课程时间" prop="course_time">
            <el-input v-model="ediitForm.course_time"></el-input>
          </el-form-item>
          <el-form-item label="课程类型" prop="course_type">
            <el-select v-model="ediitForm.course_type" placeholder="Select" style="width: 115px">
             
          <el-option label="计算机技术" value='计算机技术' />
          
          <el-option label="天文" value='天文' />
          <el-option label="地理" value='地理' />
          <el-option label="医学" value='医学' />
        </el-select>
      
          </el-form-item>
          <el-form-item label="发布人" prop="course_user_id">
            <el-input v-model="ediitForm.course_user_id"></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="begin_time">
            <el-time-select
                v-model="ediitForm.begin_time"
           
                start="00:00"
                step="00:30"
                end="23:59"
                placeholder="Select time"
                format="YYYY-MM-DD hh:mm:ss"
            />

          </el-form-item>
          <el-form-item label="结束时间" prop="end_time">
            <el-time-select
                v-model="ediitForm.end_time"
         
                start="00:00"
                step="00:30"
                end="23:59"
                placeholder="Select time"
                format="YYYY-MM-DD hh:mm:ss"
            />

          </el-form-item>
         
          <el-form-item label="上架" prop="statue">
            <el-switch v-model="addForm.course_put_status" :active-value="1" :inactive-value="0" size="large" /> 默认为不上架
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateCourse">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 审核状态 -->
      <el-dialog title="更改角色" v-model="updateCourseStatuesCapacityDialogVisible"  width="50%" :visible.sync="updateCourseStatuesCapacityDialogVisible" >

      
        <p>{{cno}}</p>
          <p>
            <el-select v-model="cno_status" placeholder="状态" style="width: 115px">
          <el-option label="未审核" value=0 />
          
          <el-option label="审核通过" value=1 />
          <el-option label="拒绝" value=2 />
        </el-select>
          </p>
           
 
   
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateCourseStatuesCapacityDialogVisible =false">取 消</el-button>
          <el-button type="primary" @click="updateCourseStatues">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        // 获取课程列表的参数对象
        queryInfo: {
          query: '',
          // 当前的页数
          pagenum: 1,
          // 当前每页显示多少条数据
          pagesize: 10,
          //选择是课程的类型
          capacity:''
        },
        courselist: [],
        total: 0,
        // 控制添加用户对话框的显示与隐藏
        addDialogVisible: false,
        // 控制修改用户对话框的显示与隐藏
        updateDialogVisible:false,
        //更改角色
        updateCapacityDialogVisible:false,
        //更改审核状态
        updateCourseStatuesCapacityDialogVisible:false,
        //装课程号 和 课程审核状态
        cno:'',
        cno_status:0,
        // 添加课程的表单数据
        addForm: {
          course_id: 'cxxxx',
          course_name: '',
          course_profile:'',
          course_type:'',
          course_section: 10,
          course_time: 0,
          course_price:0,
          course_user_id:'',//发布人的编号
          begin_time:'',
          update_time:'',
          end_time:'',
          course_status:0,//0待审 1审核通过 2审核未通过
          course_put_status:0, //0未上架 1上架
        
        },
        //查询到的信息
        ediitForm:[],
        // 添加表单的验证规则对象
        // addFormRules: {
        //   username: [
        //     { required: true, message: '请输入用户名', trigger: 'blur' },
        //     {
        //       min: 3,
        //       max: 10,
        //       message: '用户名的长度在3~10个字符之间',
        //       trigger: 'blur'
        //     }
        //   ],
        //   password: [
        //     { required: true, message: '请输入密码', trigger: 'blur' },
        //     {
        //       min: 6,
        //       max: 15,
        //       message: '用户名的长度在6~15个字符之间',
        //       trigger: 'blur'
        //     }
        //   ],
        //   email: [
        //     { required: true, message: '请输入邮箱', trigger: 'blur' },
        //     { validator: checkEmail, trigger: 'blur' }
        //   ],
        //   mobile: [
        //     { required: true, message: '请输入手机号', trigger: 'blur' },
        //     { validator: checkMobile, trigger: 'blur' }
        //   ]
        // }
      }
    },
    created() {
      this.getCourseList()
    },
    methods: {
      async getCourseList() {
        const { data: res } = await this.$http.post('courseList',this.queryInfo
        )
        console.log(res)
        if (res === null) {
          return this.$message.error('获取课程列表失败！')
        }
        this.courselist = res
        // this.total = res.data.total
        console.log(this.courselist)
      },
      // 监听 pagesize 改变的事件
      handleSizeChange(newSize) {
        // console.log(newSize)
        this.queryInfo.pagesize = newSize
        this.getCourseList()
      },
      // 监听 页码值 改变的事件
      handleCurrentChange(newPage) {
        console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getCourseList()
      },
      // 监听 switch 开关状态的改变
      async CourseStateChanged(course) {
        console.log(course)
        const { data: res } = await this.$http.put(
          `updateCourse_put_status/${course.course_id}`
        )
        console.log(res)
        if (res !== 200) {
          userinfo.mg_state = !userinfo.mg_state
          return this.$message.error('更新用户状态失败！')
        }
        this.$message.success('更新用户状态成功！')
      },
      // 监听添加用户对话框的关闭事件
      addDialogClosed() {
        this.$refs.addFormRef.resetFields()
      },
      opendia(){
        this.addDialogVisible = true
      },
      closedia(){
        console.log(this.addDialogVisible)
        this.addDialogVisible = false
        console.log(this.addDialogVisible)
      },
      // 点击按钮，添加新用户
      addCourse() {
        this.$refs.addFormRef.validate(async valid => {
          if (!valid) return
          // 可以发起添加用户的网络请求
          const { data: res } = await this.$http.post('addCourse', this.addForm)
  
          if (res !== 200) {
            this.$message.error('添加课程失败！')
          }
  
          this.$message.success('添加课程成功！')
          // 隐藏添加用户的对话框
          this.addDialogVisible = false
          // 重新获取用户列表数据
          this.getCourseList()
        })
      },
      async deleteCourse(course_id){
        if(confirm("你确认删除")){
          const { data: res } = await this.$http.put('deleteCourse/'+course_id)
          if(res != 200){
            return this.$message.error("删除失败")
          }
          this.$message.success('删除成功')
          this.getCourseList()
        }
      },
      async selectDialog(course_id){
        console.log(course_id)
        const {data:res} = await this.$http.get('selectCourse/'+course_id)
        if(res != null){
          this.ediitForm = res
          console.log(this.ediitForm)
          this.updateDialogVisible = true
        }
        

      },
      async updateCourse(){
          // 可以发起添加用户的网络请求
          const { data: res } = await this.$http.post('updateCourse', this.ediitForm)
  
          if (res !== 200) {
            this.$message.error('修改用户失败！')
          }
  
          this.$message.success('修改用户成功！')
          // 隐藏添加用户的对话框
          this.updateDialogVisible = false
          // 重新获取用户列表数据
          this.getCourseList()
        
      },
      
      openUpdateCourseStatues(course_id,course_status){
        this.updateCourseStatuesCapacityDialogVisible = true
        this.cno = course_id
        this.cno_status = course_status
      },
      async updateCourseStatues(){
       const course_id = this.cno
       const course_status = this.cno_status
        if(confirm("你确认修改？")){
          const { data: res } = await this.$http.put('updateCourseStatues/'+course_id+'/'+course_status)
          if(res != 200){
            this.$message.error("修改失败")
          }
          this.$message.success('修改成功')
          this.updateCourseStatuesCapacityDialogVisible = false
          this.getCourseList()
        }
      }
    }
  }

  </script>
  
  <style lang="less" scoped>
  </style>
  